<script setup lang="tsx">
import { computed, onMounted, ref, watch } from 'vue';
import type { Crontab } from '@/service/api';
import { $t } from '@/locales';

defineOptions({
  name: 'CrontabMin'
});

interface Props {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
  check: Function;
  cron: Crontab;
}
const props = defineProps<Props>();

interface Emits {
  (e: 'update'): void;
}
const emit = defineEmits<Emits>();

const minRadioValue = ref('1');
const minCycle01 = ref(1);
const minCycle02 = ref(2);
const minAverage01 = ref(0);
const minAverage02 = ref(1);
const minCheckboxList = ref<string[]>([]);

const minOptions: any = [];
function initMinOptions() {
  for (let i = 0; i < 60; i += 1) {
    minOptions.push({
      label: i,
      value: i
    });
  }
}
initMinOptions();

function retsetParam() {
  minCycle01.value = 1;
  minCycle02.value = 2;
  minAverage01.value = 0;
  minAverage02.value = 1;
  minCheckboxList.value = [];
}

// 计算两个周期值
const minCycleTotal = computed(() => {
  const c01 = props.check(minCycle01.value, 0, 58);
  const c02 = props.check(minCycle02.value, c01 ? c01 + 1 : 1, 59);
  return `${c01}-${c02}`;
});
// 计算平均用到的值
const minAverageTotal = computed(() => {
  const a01 = props.check(minAverage01.value, 0, 58);
  const a02 = props.check(minAverage02.value, 1, 59 - a01 || 0);
  return `${a01}/${a02}`;
});
// 计算勾选的checkbox值合集
const minCheckboxString = computed(() => {
  const str = minCheckboxList.value.join();
  return str === '' ? '*' : str;
});

watch(
  () => props.cron,
  () => {
    minValueChange(props.cron);
  }
);
watch(
  () => minRadioValue.value,
  () => {
    radioChange();
  }
);
watch(
  () => minCycleTotal.value,
  () => {
    minCycleChange();
  }
);
watch(
  () => minAverageTotal.value,
  () => {
    minAverageChange();
  }
);
watch(
  () => minCheckboxString.value,
  () => {
    minCheckboxChange();
  }
);

// 单选按钮值变化时
function radioChange() {
  switch (minRadioValue.value.toString()) {
    case '1':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'min', '*', 'min');
      break;
    case '2':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'min', minCycleTotal.value, 'min');
      break;
    case '3':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'min', minAverageTotal.value, 'min');
      break;
    case '4':
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      emit('update', 'min', minCheckboxString.value, 'min');
      break;
    default:
      break;
  }
}
// 周期两个值变化时
function minCycleChange() {
  minRadioValue.value = '2';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'min', minCycleTotal.value, 'min');
}
// 平均两个值变化时
function minAverageChange() {
  minRadioValue.value = '3';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'min', minAverageTotal.value, 'min');
}
// checkbox值变化时
function minCheckboxChange() {
  minRadioValue.value = '4';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  emit('update', 'min', minCheckboxString.value, 'min');
}

function minValueChange(cronVal: Crontab) {
  minRadioValue.value = '';
  retsetParam();
  const val = cronVal.min;
  if (val === '*') {
    minRadioValue.value = '1';
  } else if (val.includes('-')) {
    minRadioValue.value = '2';
    const v = val.split('-');
    minCycle01.value = Number.parseInt(v[0], 10);
    minCycle02.value = Number.parseInt(v[1], 10);
  } else if (val.includes('/')) {
    minRadioValue.value = '3';
    const v = val.split('/');
    minAverage01.value = Number.parseInt(v[0], 10);
    minAverage02.value = Number.parseInt(v[1], 10);
  } else {
    minRadioValue.value = '4';
    minCheckboxList.value = val.split(',');
  }
}

onMounted(() => {
  const cronVal = props.cron;
  minValueChange(cronVal);
});
</script>

<template>
  <div>
    <NForm>
      <NRadioGroup v-model:value="minRadioValue">
        <NFormItem class="form-item-height">
          <NRadio value="1">{{ $t('common.job.minuteOne') }}</NRadio>
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="2" />
          &nbsp;{{ $t('common.job.minuteTwoPre') }}&nbsp;
          <NInputNumber v-model:value="minCycle01" :min="0" :max="58" button-placement="both"></NInputNumber>
          &nbsp;-&nbsp;
          <NInputNumber
            v-model:value="minCycle02"
            :min="minCycle01 ? minCycle01 + 1 : 1"
            :max="59"
            button-placement="both"
          />
          &nbsp;{{ $t('common.job.minuteTwoSuf') }}
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="3" />
          &nbsp;{{ $t('common.job.minuteThreePre') }}&nbsp;
          <NInputNumber v-model:value="minAverage01" :min="0" :max="58" button-placement="both" />
          &nbsp;{{ $t('common.job.minuteThreeMid') }}&nbsp;
          <NInputNumber v-model:value="minAverage02" :min="1" :max="59 - minAverage01 || 0" button-placement="both" />
          &nbsp;{{ $t('common.job.minuteThreeSuf') }}
        </NFormItem>
        <NFormItem class="form-item-height">
          <NRadio value="4" />
          &nbsp;{{ $t('common.job.specify') }}&nbsp;
          <NSelect
            v-model:value="minCheckboxList"
            :options="minOptions"
            multiple
            class="w-50%"
            :placeholder="$t('common.job.multipleChoices')"
          />
        </NFormItem>
      </NRadioGroup>
    </NForm>
  </div>
</template>

<style scoped>
.form-item-height {
  --n-blank-height: 0px !important;
  --n-feedback-height: 0px !important;
}
</style>
